// 引入React的useState钩子
import { useState } from 'react';
// 引入react-spinners中的CircleLoader组件，用于加载动画
import { CircleLoader } from 'react-spinners';
// 引入自定义的queryIndex函数和类型ResponseSources
import queryIndex, { type ResponseSources } from '../apis/queryIndex';

// 定义IndexQuery组件
const IndexQuery = () => {
  // 定义isLoading状态，表示是否正在加载
  const [isLoading, setLoading] = useState(false);
  // 定义responseText状态，存储查询返回的文本
  const [responseText, setResponseText] = useState('');
  // 定义responseSources状态，存储查询返回的来源数组
  const [responseSources, setResponseSources] = useState<ResponseSources[]>([]);

  // 处理输入框回车事件的函数
  const handleQuery = (e: React.KeyboardEvent<HTMLInputElement>) => {
    // 如果按下的是回车键
    if (e.key === 'Enter') {
      // 设置加载状态为true
      setLoading(true);
      // 调用queryIndex函数进行查询
      queryIndex(e.currentTarget.value).then((response) => {
        // 查询完成后设置加载状态为false
        setLoading(false);
        // 设置返回的文本
        setResponseText(response.text);
        // 设置返回的来源数组
        setResponseSources(response.sources);
      });
    }
  };

  // 根据responseSources生成对应的JSX元素数组
  const sourceElems = responseSources.map((source) => {
    // 如果文档ID长度大于28，截断并加省略号，否则直接显示
    const nodeTitle =
      source.doc_id.length > 28
        ? source.doc_id.substring(0, 28) + '...'
        : source.doc_id;
    // 如果文本长度大于150，截断为130并加省略号，否则直接显示
    const nodeText =
      source.text.length > 150 ? source.text.substring(0, 130) + '...' : source.text;

    // 返回每个来源的JSX结构
    return (
      <div key={source.doc_id}>
        <p>{nodeTitle}</p>
        <p>{nodeText}</p>
        <p>Similarity={source.similarity}, start={source.start}, end={source.end}</p>
      </div>
    );
  });

  // 组件的渲染部分
  return (
    <div>
      {/* 查询输入区域 */}
      <div>
        <label htmlFor='query-text'>Ask a question!</label>
        <input
          type='text'
          name='query-text'
          placeholder='Enter a question here'
          onKeyDown={handleQuery}
        />
      </div>

      {/* 加载动画 */}
      {isLoading && <CircleLoader />}

      {/* 查询结果展示区域 */}
      <div>
        <div>Query Response</div>
        <div>{responseText || 'Enter a question to get a response...'}</div>
      </div>

      {/* 查询来源展示区域 */}
      <div>
        <div>Response Sources</div>
        <div>
          {/* 如果有来源则显示，否则显示暂无来源 */}
          {sourceElems.length > 0 ? sourceElems : (
            <div>No sources available yet</div>
          )}
        </div>
      </div>
    </div>
  );
};

// 导出IndexQuery组件
export default IndexQuery;
